<template>
    <Form v-bind="defaultFormProps" size="large" autocomplete="on" ref="formRef" :model="formState" :rules="rules" @finish="handleFinish()">
        <h3 class="text-2xl font-bold text-center text-primary mb-[6px]">加入已有企业</h3>
        <p class="text-sm text-third text-center mb-8">填写信息，提交申请加入企业招聘协作</p>
        <FormItem label="企业码" name="companyCode">
            <a-input v-model:value="formState.companyCode" placeholder="请输入企业码" class="!text-sm text-primary" />
        </FormItem>
        <FormItem label="姓名" name="name">
            <a-input v-model:value="formState.name" placeholder="请输入你的姓名" class="!text-sm text-primary" />
        </FormItem>
        <FormItem class="!mt-[56px]">
            <a-button type="primary" html-type="submit" block shape="round" :loading="formLoading">确认</a-button>
        </FormItem>
        <p class="text-center text-secondary text-sm mt-6 touchable-opacity" @click="$emit('switch')">创建企业 >></p>
    </Form>
</template>
<script lang="ts" setup>
import { Form, FormItem } from 'ant-design-vue'
import { defaultFormProps } from '@/constants/comp-setting'
type FormState = {
    companyCode?: string
    name?: string
};
defineOptions({
    name: 'GpJoinCompanyForm',
    inheritAttrs: true
})
const emit = defineEmits<{
    success: []
    switch: []
}>()
const { action } = defineProps<{
    action(formState: FormState): IAwaitable<any>
}>()
const {
    formLoading,
    formRef,
    formState,
    handleFormFinish,
    rules
} = useFormState<FormState>({
    getInitialState() {
        return {}
    },
    rules: {
        companyCode: { required: true },
        name: { required: true },
    }
})
function handleFinish() {
    handleFormFinish(action).then(() => {
        emit("success")
    })
}
</script>